<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文件上传管理',active='upload'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<link th:href="@{/dropzone/4.3.0/min/dropzone.min.css}" rel="stylesheet"/>
<link th:href="@{/select2/4.0.4/css/select2.min.css}" rel="stylesheet" />
<!--<script th:src="@{/jquery/2.2.3/jquery.min.js}"></script>-->

<style>
    #dropzone {
        margin-bottom: 3rem;
    }

    .dropzone {
        border: 2px dashed #0087F7;
        border-radius: 5px;
        background: white;
    }

    .dropzone .dz-message {
        font-weight: 400;
    }

    .dropzone .dz-message .note {
        font-size: 0.8em;
        font-weight: 200;
        display: block;
        margin-top: 1.4rem;
    }

    .upload-img {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        box-shadow: 0px 0px 8px #333;
    }

    .upload-text {
        font-size: 12px;
        font-weight: 300;
    }

    .upload-img:hover {
        background-color: #f9f9f9;
    }
</style>


<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">文件管理</h4>
                    </div>

                    <div class="row">
                        <div class="col-md-12" style="padding: 20px;">
                            <div class="panel panel-primary">
                                <div class="panel-body">

                                    <form id="searchForm" class="form-inline" role="form" novalidate="novalidate"
                                        th:action="@{'/admin/upload/list'}">

                                        <div class="form-group">
                                            <label class="sr-only">年月</label>
                                            <input type="text" id="subPath" name="subPath" class="form-control" placeholder="请输入年月（如2017/06）"/>
                                        </div>

                                        <div class="form-group">
                                            <label class="sr-only">文件类型</label>
                                            <input type="url" id="ftype" name="ftype" class="form-control" placeholder="请输入文件类型" />
                                        </div>

                                        <div class="form-group">
                                            <label class="sr-only">文件名称</label>
                                            <input type="url" id="keyword" name="keyword" class="form-control" placeholder="请输入文件名称" />
                                        </div>

                                        <div class="form-group">
                                            <select id="delFlag" name="delFlag" class="form-control" data-placeholder="请选择是否删除...">
                                                <option value="" >请选择是否删除...</option>
                                                <option value="1" >删除</option>
                                                <option value="0" >正常</option>
                                            </select>
                                        </div>

                                        <button type="submit" class="btn btn-success waves-effect waves-light m-l-10"
                                                >查看文件列表</button>
                                    </form>
                                </div> <!-- panel-body -->
                            </div> <!-- panel -->
                        </div> <!-- col -->

                    </div>

                    <div class="row ">

                        <div class="col-md-12 portlets">

                            <!-- Your awesome content goes here -->
                            <div class="m-b-30">
                                <form action="#" class="dropzone" id="dropzone">
                                    <div class="fallback">
                                        <input name="file" type="file" multiple="multiple"/>
                                    </div>
                                    <div class="dz-message">
                                        将文件拖至此处或点击上传.
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 portlets">
                            <!-- Your awesome content goes here -->
                            <div class="m-b-30">

                            </div>
                        </div>
                    </div>



                    <div class="col-md-12 upload">
                        <th:block th:if="${commons.is_empty(uploads)}">
                            <div class="row">
                                <div class="col-md-4 text-center">
                                    <div class="alert alert-warning">
                                        目前还没有一个附件呢，你可以上传试试!
                                    </div>
                                </div>
                            </div>
                        </th:block>
                        <th:block th:unless="${commons.is_empty(uploads)}">
                            <th:block th:each="upload : ${uploads.list}">
                                <div class="col-md-2 text-center m-t-10">
                                    <a th:href="@{${commons.site_image_url(upload.id)}}" target="_blank">
                                        <img class="upload-img"
                                             th:src="@{${upload.ftype == 'image'}? ${commons.site_image_url(upload.id)} : '/admin/images/attach.png'}"
                                             th:title="${upload.fname}"/>
                                    </a>
                                    <div class="clearfix m-t-10">
                                        <span class="upload-text" data-toggle="tooltip" data-placement="top"
                                                    th:attr="data-original-title=${upload.fname}"
                                                    th:text="${commons.substr(upload.fname, 12)}"></span>
                                    </div>
                                    <div class="clearfix">
                                        <button th:attr="url=${commons.recoveryFileUrl(upload.url,#httpServletRequest)}" type="button"
                                                class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                                            <i class="fa fa-copy"></i> <span>复制</span>
                                        </button>
                                        <button th:attr="url=${commons.recoveryFileUrlForMd(upload.markdownCode,#httpServletRequest)}" type="button"
                                                class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                                            <i class="fa fa-copy"></i> <span>MD</span>
                                        </button>
                                        <button type="button"
                                                class="btn btn-danger btn-sm waves-effect waves-light m-t-5"
                                                th:onclick="'delUpload('+${upload.id}+');'">
                                            <i class="fa fa-trash-o"></i> <span>删除</span>
                                        </button>
                                    </div>
                                </div>
                            </th:block>

                        </th:block>
                    </div>
                    <div th:replace="comm/macros :: pageAdminNav(${uploads})"></div>
                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/footer :: footer"></div>
<script th:src="@{/dropzone/4.3.0/min/dropzone.min.js}"></script>
<script th:src="@{/clipboard/1.6.0/clipboard.min.js}"></script>
<!-- select2必须放在jquery后面 -->
<script th:src="@{/select2/4.0.4/js/select2.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var tale = new $.tale();
    Dropzone.autoDiscover = false;

    $("#dropzone").dropzone({
        paramName: "file",
        url: getContextPath() + "/admin/upload/save",
        maxFilesize: 10,//最大文件大小，单位是 MB。
        init: function () {
            this.on("success", function (file, msg) {
                console.log(file);
                if (msg.success !== true) {
                    tale.alertError('上传文件大于10M');
                }
                setTimeout(function () {
                    window.location.reload();
                }, 200);
            });
        }
    });

    /**Clipboard begin**/
    var clipboard = new Clipboard('button.copy', {
        text: function (trigger) {
            return $(trigger).attr('url');
            //return $(trigger).attr('markdown');
        }
    });

    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });
    /**Clipboard end**/

    function delUpload(id) {
        tale.alertConfirm({
            title: '确定删除该附件吗?',
            then: function () {
                tale.post({
                    url: getContextPath() + '/admin/upload/delete',
                    data: {id: id},
                    success: function (result) {
                        if (result && result.success) {
                            tale.alertOkAndReload('附件删除成功');
                        } else {
                            tale.alertError(result.msg || '附件删除失败');
                        }
                    }
                });
            }
        });
    }
    /*]]>*/
</script>
<script type="application/javascript">
    $(document).ready(function() {
        $("#delFlag").select2();
    });

    function search(){
        /*alert("年月：" + $("#subPath").val());
         alert("类型：" + $("#ftype").val());
         alert("关键字：" + $("#keyword").val());
         alert("是否删除：" + $("#delFlag").val());*/

        tale.post({
            url: '/admin/upload/list',
            data: {
                "subPath": $("#subPath").val() + "",
                "ftype": $("#ftype").val(),
                "keyword": $("#keyword").val(),
                "delFlag": $("#delFlag").val()
            }/*,
             success: function (result) {
             if (result ) {
             tale.alertOkAndReload('获取列表成功');
             } else {
             tale.alertError('获取列表失败');
             }
             }*/
        });


    }

</script>
</body>
</html>